<!--
 * @Author: liujm
 * @Date: 2020-12-16 10:24:31
 * @LastEditTime: 2024-08-02 00:55:46
 * @Description: file content
-->
<template>
  <div class="app-main">
    <!-- begin 面包屑组件 -->
    <vBreadCrumb v-if="!$route.meta.topBreadcrumb" class="breadcrumb-container"></vBreadCrumb>
    <!-- begin 动态组件 -->
    <component class="web-component" :is="componentName"></component>
    <!-- end 动态组件 -->
  </div>
</template>

<script>
import { camelCase, upperFirst } from 'lodash-es';
import vBreadCrumb from '@/components/Breadcrumb';

export default {
  // 声明组件
  components: {
    vBreadCrumb
  },
  data() {
    return {
      // 当前显示的组件名称
      componentName: ''
    };
  },
  watch: {
    $route: {
      handler(val) {
        // // 如果有某个组件的规则有返回值，则加载该组件，否则不加载组件
        this.componentName = this.getComponent(val.path);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 根据路由获取要加载的组件
     * 例： 如访问路由为 /home，则组件需放在 modules/pc/views/home/index.vue
     * 如访问路由为 /my-work/todo-list, 则组件需放在 modules/pc/views/my-work/TodoList.vue
     * @param {*} path 路径
     */
    getComponent(path) {
      const arr = path.split('/');
      const folderName = arr.at(1);
      const componentName = arr.length > 2 ? upperFirst(camelCase(arr.at(-1))) : 'index';
      const component = resolve => require([
        path.includes('/draft-process') ? `@/views/${arr.at(-1)}/index`
          : `@/views/${folderName}/${componentName}`
      ], resolve);
      // const component = resolve => require([
      //   `@/views/${folderName}/${componentName}`
      // ], resolve);
      return component;
    }
  }
};
</script>
